<template>
    <div class="panel">
        <div class="panel-hd">
            <span>
                <el-select v-model="searchParam.useEntryPanelCode" @change="changePanel" style="width: 150px" placeholder="请选择面板" size="mini">
                    <el-option v-for="item in panelDataSource" :key="item.key" :label="item.panelCode + ' ' + item.panelName" :value="item.panelCode">
                    </el-option>
                </el-select>
            </span>
            <span>
                <span>账户层次：</span>
                <el-select v-model="searchParam.originalAccoutId" style="width: 150px" size="mini">
                    <el-option label="0 产品" value="0" />
                    <el-option label="1 产品组" value="1" />
                </el-select>
            </span>
            <span v-if="searchParam.originalAccoutId === '0'">
                <span>基金名称：</span>
                <el-select v-model="searchParam.fundGrCode" style="width: 250px" size="mini" filterable multiple collapse-tags>
                    <el-option v-for="item in fundInfo" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </span>
            <span v-else>
                <span>基金组名称：</span>
                <el-select v-model="searchParam.fundGrCode" style="width: 250px" size="mini" multiple collapse-tags>
                    <el-option v-for="item in fundGroup" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </span>
            <span>
                <el-button size="mini" @click="resetData">重置</el-button>
                <el-button type="primary" size="mini" @click="changePanel">查询</el-button>
            </span>
        </div>
        <div class="panel-body">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="统计区域" name="1">
                    <ItemRealTimeMonitoringEcharts :box01="echart01" :box02="echart02" />
                </el-collapse-item>
            </el-collapse>
            <div class="panel-subs">
                <div class="panel-subs-hd">
                    订阅面板
                    <div class="panel-subs-hd-r">
                        <div :class="['panel-subs-hd-r-item', panelType === 1 ? 'active' : '']" @click="panelType = 1">
                            <div></div>
                            <div></div>
                        </div>
                        <div class="panel-subs-hd-r-line"></div>
                        <div :class="['panel-subs-hd-r-item', panelType === 2 ? 'active' : '']" @click="panelType = 2">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="panel-subs-boody" v-show="panelDetailDataSource.length">
                    <div class="panel-subs-boody-wrap">
                        <div
                            :class="['panel-subs-boody-box', pItem.moduleCode]"
                            :style="
                                panelType === 1 ? `min-width: 484px; max-width: calc(50% - 10px)` : `min-width: 320px; max-width: calc(33.33% - 10px)`
                            "
                            v-for="pItem in panelDetailDataSource"
                            v-show="!hiddenPanelList.includes(pItem.moduleCode)"
                            :key="pItem.moduleCode"
                        >
                            <div class="panel-subs-body-box-hd">
                                <span>{{ pItem.moduleName }}</span>
                                <div class="panel-subs-body-box-icon">
                                    <i class="el-icon-full-screen" @click="onFullScreen(pItem.moduleCode)"></i>
                                    <i class="el-icon-close" style="color: red" @click="onCloseTable(pItem.moduleCode)"></i>
                                </div>
                            </div>
                            <div class="panel-subs-body-box-main">
                                <el-table
                                    :data="pItem.tableData || []"
                                    :height="isFullScreen === pItem.moduleCode ? 'calc(100vh - 50px)' : '215px'"
                                    size="mini"
                                    border
                                >
                                    <el-table-column prop="entryCode" label="条目编号" show-overflow-tooltip />
                                    <el-table-column prop="entryName" label="条目名称" show-overflow-tooltip />
                                    <el-table-column label="触发阈值" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            {{
                                                scope.row.calculateValue != null
                                                    ? CompareDirection[scope.row.compareType] + '' + scope.row.thresholdValue
                                                    : '--'
                                            }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="calculateValue" label="实际值" show-overflow-tooltip>
                                        <template slot-scope="scope">
                                            <span
                                                v-if="scope.row.calculateValue != null"
                                                :style="{
                                                    textDecoration: 'underline',
                                                    textDecorationColor: ThresholdTypeColor[scope.row.thresholdType],
                                                    color: ThresholdTypeColor[scope.row.thresholdType],
                                                    cursor: 'pointer',
                                                }"
                                                @click="openEntryResultDetail(scope.row.entryCode, pItem.moduleName)"
                                                slot="reference"
                                            >
                                                {{ scope.row.calculateValue }}
                                            </span>
                                            <span v-else>--</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="unit" label="单位" show-overflow-tooltip />
                                </el-table>
                            </div>
                        </div>
                        <div
                            class="panel-subs-boody-box"
                            v-show="hiddenPanelList.length"
                            :style="
                                panelType === 1 ? `min-width: 484px; max-width: calc(50% - 10px)` : `min-width: 320px; max-width: calc(33.33% - 10px)`
                            "
                            key="panel-subs-add"
                        >
                            <div class="panel-subs-body-box-hd">
                                <span>&nbsp;</span>
                            </div>
                            <div class="panel-subs-body-box-main" style="cursor: pointer" @click="addPanelDetailData">
                                <i
                                    style="font-size: 40px;margin: 0 auto;display: block;text-align: center;padding-top: 77px;"
                                    class="el-icon-circle-plus-outline"
                                ></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-subs-layout">
                   <yh-dialog drag title="添加模块" :visible.sync="panelVisible">
                        <div>
                            <el-checkbox-group v-model="panelShowData" size="mini">
                                <el-checkbox
                                    v-for="spItem in panelDetailDataSource"
                                    :label="spItem.moduleCode"
                                    style="width: 100%"
                                    :key="spItem.moduleCode"
                                >
                                    {{ spItem.moduleName }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="panelVisible = false">取 消</el-button>
                            <el-button type="primary" @click="closePanelDetailData">确 定</el-button>
                        </span>
                   </yh-dialog>
                </div>
                <div class="panel-subs-popup">
                    <ItemRealTimeMonitoringEntryTable :visible.sync="entryVisible" :entry-info="entryResultInfo" :list="entryResultDetail" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { getEntryResult, getEntryResultDetail, getModuleByPanelCode, getModuleEnableEntry, getUserPanel } from '@/pages/risk-monitoring/api';
import DictionConstUtil from '@/utils/diction-const-util';
import ItemRealTimeMonitoringEcharts from './item-real-time-monitoring/item-real-time-monitoring-echarts.vue';
import ItemRealTimeMonitoringEntryTable from '@/pages/risk-monitoring/item-real-time-monitoring/item-real-time-monitoring-entry-table.vue';

@Component({ name: 'ItemRealTimeMonitoring', components: { ItemRealTimeMonitoringEntryTable, ItemRealTimeMonitoringEcharts } })
export default class ItemRealTimeMonitoring extends Vue {
    async created() {
        const res = getUserPanel().then(response => {
            let panelDataSource = response || [];
            panelDataSource.forEach(element => {
                element.key = element.panelCode;
            });
            this.panelDataSource = panelDataSource;
        });
        // 基金名称列表
        DictionConstUtil.FNFundInfo().then(response => {
            this.fundInfo = response.map(item => {
                return { dictKey: item.fundCode, dictKeyName: item.fundNameSt };
            });
        });
        // 基金组名称列表
        DictionConstUtil.FNFundGroup().then(response => {
            this.fundGroup = response.map(item => {
                return { dictKey: item.fundGroupCode, dictKeyName: item.fundGroupName };
            });
        });
    }
    // 符号字典
    private CompareDirection = {
        '0': '>',
        '1': '<',
        '2': '>=',
        '3': '<=',
        '4': '=',
        '5': '<>',
        '6': ' ',
    };
    // 颜色字典
    private ThresholdTypeColor = DictionConstUtil.ThresholdTypeColor;

    // 面板下拉
    private panelDataSource = [];
    // 基金名称列表
    private fundInfo = [];
    // 基金组名称列表
    private fundGroup = [];
    // 搜索条件
    private searchParam = {
        useEntryPanelCode: '',
        originalAccoutId: '0',
        fundGrCode: [],
    };
    // 激活标签
    private activeNames = ['1'];

    // 图表数据
    private echart01 = {
        violationsFundCodes: [], // 合规
        complianceFundCodes: [], // 触警
    };
    private echart02 = {
        errorEntry: [], // 错误
        waringEntry: [], // 警告
        prohibitEntry: [], // 禁止
        examinationEntry: [], // 送审
    };

    // 下面面板类型
    private panelType = 1;
    // 下面表格数据
    private panelDetailDataSource = [];
    // 表格放大状态
    private isFullScreen = null;
    // 隐藏的面板列表
    private hiddenPanelList = [];

    // 面板显示
    private panelVisible = false;

    // 弹窗 - 下面表格布局
    private panelShowData = [];

    // 弹窗表格数据
    private entryVisible = null;
    private entryResultInfo = {
        title: '',
        code: '',
    };
    private entryResultDetail = [];

    // 重置数据
    resetData() {
        // // 基金名称列表
        // this.fundInfo = [];
        // // 基金组名称列表
        // this.fundGroup = [];
        // 搜索条件
        this.searchParam = {
            useEntryPanelCode: '',
            originalAccoutId: '0',
            fundGrCode: [],
        };
        // 图表数据
        this.echart01.violationsFundCodes = [];
        this.echart01.complianceFundCodes = [];
        this.echart02.errorEntry = [];
        this.echart02.waringEntry = [];
        this.echart02.prohibitEntry = [];
        this.echart02.examinationEntry = [];

        // 面板数据
        this.panelDetailDataSource = [];
        this.hiddenPanelList = [];

        // 弹窗表格数据
        this.entryResultDetail = [];
    }

    // 改变面板
    changePanel() {
        if (!this.searchParam.useEntryPanelCode) {
            this.yh_message_warn('请选择面板');
            return;
        }
        // 获取
        getEntryResult(this.searchParam).then(res => {
            // 获取左边图标数据
            this.echart01.complianceFundCodes = this.fundInfo.filter(item => res.complianceFundCodes.includes(item.dictKey));
            this.echart01.violationsFundCodes = this.fundInfo.filter(item => res.violationsFundCodes.includes(item.dictKey));
            // 获取右边图表数据
            this.echart02.errorEntry = res.errorEntry;
            this.echart02.waringEntry = res.waringEntry;
            this.echart02.examinationEntry = res.examinationEntry;
            this.echart02.prohibitEntry = res.prohibitEntry;

            const riskMonitorEntryResult = res.riskMonitorEntryResult || [];

            // 下面获取模块数据
            getModuleByPanelCode(this.searchParam.useEntryPanelCode).then(async res => {
                const response = res || [];
                const panelDetailDataSource = await this.getTableList(response, riskMonitorEntryResult);
                this.panelDetailDataSource = JSON.parse(JSON.stringify(panelDetailDataSource));
            });
        });
    }

    /**
     * 获取订阅面板的数据
     * @param data
     */
    async getTableList(data: any[], riskMonitorEntryResult) {
        const panelDetailDataSource = data.sort((a, b) => a.moduleOrder - a.moduleOrder);
        for (let i = 0; i < panelDetailDataSource.length; i++) {
            try {
                panelDetailDataSource[i].tableData = await getModuleEnableEntry(true, panelDetailDataSource[i].moduleCode);
                panelDetailDataSource[i].tableData.forEach(item => {
                    const itemData = riskMonitorEntryResult.find(child => child.entryCode === item.entryCode);
                    if (itemData) {
                        item.calculateValue = itemData.calculateValue;
                        item.compareType = itemData.compareType;
                        item.thresholdValue = itemData.thresholdValue;
                        item.thresholdType = itemData.thresholdType;
                    } else {
                        item.calculateValue = null;
                        item.compareType = null;
                        item.thresholdValue = null;
                        item.thresholdType = null;
                    }
                });
            } catch (e) {
                panelDetailDataSource[i].tableData = [];
            }
        }
        return panelDetailDataSource;
    }

    // 全屏功能
    onFullScreen(code) {
        const dom = document.querySelector('.panel-subs-boody-box.' + code);
        this.isFullScreen = this.isFullScreen ? null : code;
        if (dom) {
            dom.classList.toggle('full-screen');
        }
    }

    // 关闭表格
    onCloseTable(code) {
        this.isFullScreen = null;
        this.hiddenPanelList.push(code);
    }

    // 添加面板
    addPanelDetailData() {
        const hiddenPanelList = this.hiddenPanelList;
        this.panelShowData = this.panelDetailDataSource.filter(item => !hiddenPanelList.includes(item.moduleCode)).map(item => item.moduleCode);
        this.panelVisible = true;
    }

    // 关闭面板
    closePanelDetailData() {
        const panelShowData = this.panelShowData;
        this.hiddenPanelList = this.panelDetailDataSource.filter(item => !panelShowData.includes(item.moduleCode)).map(item => item.moduleCode);
        this.panelVisible = false;
    }

    // 打开弹窗表格
    openEntryResultDetail(entryCode, moduleName) {
        this.entryVisible = true;
        this.entryResultInfo = {
            title: moduleName,
            code: entryCode,
        };
        getEntryResultDetail({
            entryCode: entryCode,
            originalAccoutId: this.searchParam.originalAccoutId,
            fundGrCode: this.searchParam.fundGrCode,
        }).then(res => {
            this.entryResultDetail = res.riskMonitorEntryResult || [];
            console.log('查询明细', this.entryResultDetail)
        });
    }
}
</script>

<style lang="scss" scoped>
.panel {
    .panel-hd {
        padding: 5px;

        > span {
            display: inline-block;
            margin: 5px 10px;

            &:last-child {
                margin-right: 0;
            }

            & /deep/ .el-select__tags {
                flex-wrap: nowrap;

                .el-tag.el-tag--info {
                    max-width: 130px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .panel-body /deep/ {
        .el-collapse-item__content {
            overflow: auto;
        }

        .el-collapse-item__header {
            color: #000;
            font-size: 20px;
            font-weight: bold;
            padding-left: 20px;
            padding-right: 20px;
            border-bottom: 2px solid #808080;
            border-top: 1px solid #808080;
        }
    }

    .panel-subs {
        background-color: #fff;

        .panel-subs-hd {
            position: relative;
            padding: 0 20px;
            line-height: 48px;
            font-size: 20px;
            font-weight: bold;
            border-bottom: 2px solid #808080;
            border-top: 1px solid #808080;

            .panel-subs-hd-r {
                position: absolute;
                right: 10px;
                bottom: 0;
                display: flex;
                justify-content: space-between;
                border: 1px solid #595959;
                border-radius: 5px;
                padding: 10px 8px;

                .panel-subs-hd-r-item {
                    display: flex;
                    justify-content: space-between;

                    &.active {
                        background-color: #ffa500;
                    }

                    > div {
                        width: 19px;
                        height: 26px;
                        border: 1px solid #000;
                    }
                }
                .panel-subs-hd-r-line {
                    flex-shrink: 0;
                    width: 2px;
                    height: 26px;
                    background-color: #000;
                    margin: 0 10px;
                }
            }
        }

        .panel-subs-boody {
            overflow: auto;
            background-color: #e8e8e8;

            .panel-subs-boody-wrap {
                display: flex;
                flex-wrap: wrap;
                padding: 10px 0 0 10px;
                min-width: 998px;

                .panel-subs-boody-box {
                    flex-shrink: 0;
                    flex-grow: 1;
                    height: 250px;
                    margin-right: 6px;
                    margin-bottom: 6px;
                    border: 1px solid #808080;
                    background-color: #fff;

                    &.full-screen {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100% !important;
                        height: 100% !important;
                        max-width: none !important;
                        min-width: auto !important;
                        z-index: 100;
                    }

                    .panel-subs-body-box-hd {
                        position: relative;
                        line-height: 30px;
                        text-align: center;
                        border-bottom: 1px solid #c8c8c8;

                        .panel-subs-body-box-icon {
                            position: absolute;
                            right: 0;
                            top: 0;

                            > i {
                                margin-right: 10px;
                                font-size: 22px;
                                line-height: 30px;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
